<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cover-view class="block-height"></cover-view>
		<cover-view class="tab-warp">
			<cover-view class="tab-box">
				<cover-view class="tab-li" v-for="(item,index) in tablist" :key="index" @click="switchTabbar(item.pagePath)">
					<cover-image :src="currentPath == item.pagePath ? item.selectedIconPath : item.iconPath " class="tabimg" mode="scaleToFill"></cover-image>
					<cover-view class="tab-text">{{item.text}}</cover-view>
					<cover-view class="tab-number" v-if="item.num > 0">{{item.num}}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY-->
		<view class="block-height"></view>
		<view class="tab-warp">
			<view class="tab-box">
				<view class="tab-li" v-for="(item,index) in tablist" :key="index" @click="switchTabbar(item.pagePath)">
					<image :src="currentPath == item.pagePath ? item.selectedIconPath : item.iconPath " class="tabimg" mode="scaleToFill"></image>
					<view class="tab-text">{{item.text}}</view>
					<view class="tab-number" v-if="item.num > 0">{{item.num}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="block-height" style="height:100rpx"></view>
		<view class="tab-warp" style="height:100rpx">
			<view class="tab-box">
				<view class="tab-li" v-for="(item,index) in tablist" :key="index" @click="switchTabbar(item.pagePath)">
					<image :src="currentPath == item.pagePath ? item.selectedIconPath : item.iconPath " class="tabimg" mode="scaleToFill"></image>
					<view class="tab-text">{{item.text}}</view>
					<view class="tab-number" v-if="item.num > 0">{{item.num}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import { netAgentList } from '@/api/clues.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	
	export default{
		props:{ 
			tipNumber:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				tablist:[
					{
						pagePath: "/pages/index/index",
						iconPath: BASE_IMG_URL+"tab1.png",
						selectedIconPath: BASE_IMG_URL+"tab1_a.png",
						text: "首页",
						isTip:true,
						num:0
					},
					{
						pagePath: "/pagesA/crm/customerManagement/customerManagement",
						iconPath: BASE_IMG_URL+"tab2.png",
						selectedIconPath: BASE_IMG_URL+"tab2_a.png",
						text: "客户",
						isTip:true,
						num:0
					},
					{
						pagePath: "/pages/news/news",
						iconPath: BASE_IMG_URL+"tab3.png",
						selectedIconPath: BASE_IMG_URL+"tab3_a.png",
						text: "消息",
						isTip:true,
						num: this.tipNumber
					},
					{
						pagePath: "/pages/profile/profile",
						iconPath: BASE_IMG_URL+"tab4.png",
						selectedIconPath: BASE_IMG_URL+"tab4_a.png",
						text: "我的",
						isTip:true,
						num:0
					}
				]
			}
		},
		computed:{
			currentPath() {
				let pages = getCurrentPages();
				let query = this.queryObj ? this.queryObj : {};
				let currPage = null;
				if (pages.length) {
					currPage = pages[pages.length - 1].route;
				}
				if (Object.keys(query).length) {
					let params = '';
					for (let key in query) {
						params += '?' + key + '=' + query[key] + '&';
					}
					params = params.substring(0, params.length - 1);
					return '/' + currPage + params;
				}
				return '/' + currPage;
			}
		},
		created() {
			console.log(this.currentPath,this.tipNumber)
			
		},
		methods:{
			switchTabbar(path) {
				uni.redirectTo({
					url: path,
					fail:(err)=>{
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.block-height{
		width:750rpx;
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
	.tab-warp{
		width:750rpx;
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		background:#fff;
		border-top: 1rpx solid #eeeeee;
		position: fixed;
		left:0; 
		bottom:0;
		z-index: 998;
		.tab-box{
			width: 100%;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			display: flex;
			align-items: center;
			justify-content: space-around;
			.tab-li {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;
				position: relative;
				.tabimg {
					width: 50rpx;
					height: 50rpx;
				}
				.tab-text {
					font-size: 20rpx;
				}
				.tab-number{
					font-size:24rpx;
					color:#fff;
					background:#F43F3B;
					width:40rpx;
					height:40rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					position: absolute;
					right:30rpx;
					top:0;
				}
			}
		}
	}
</style>
